<style lang="less">
	page{
		background: #f6f6f6;
		height: auto;
	}
    .header{
		margin-top: 20upx;
    	padding: 20upx 30upx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.header-fl{
			width: 60upx;
			height: auto;
		}
		.header-fr{
			width: calc(100% - 80upx);
			.header-fr-top{
				display: flex;
				align-items: center;
				.name{
					font-size:34upx;
					font-weight:500;
					color:rgba(51,51,51,1);
					line-height:41upx;
				}
				.mobile{
					font-size:30upx;
					font-weight:500;
					color:rgba(153,153,153,1);
					line-height:36upx;
					margin-left: 20upx;
				}
			}
			.header-fr-bot{
				font-size:24upx;
				font-weight:500;
				color:rgba(51,51,51,1);
				line-height:31upx;
				margin-top: 18upx;
			}
		}
    }
    .main{
    	padding: 20upx 30upx;
		background: #FFFFFF;
		margin-top: 20upx;
		.main_title{
			padding: 20upx 0;
			border-bottom: 1upx solid #ededed;
			.title-name{
				display: flex;
				align-items: center;
				font-size:26upx;
				font-weight:bold;
				color:rgba(51,51,51,1);
				line-height:36upx;
				.name{
					margin-right: 10upx;
				}
				.title-img{
					width: 64upx;
					border-radius: 50%;
					height: auto;
					margin-right: 10upx;
				}
			}
			.title-dingdan{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.title-dingdan-fl{
					font-size:26upx;
					font-weight:bold;
					color:rgba(51,51,51,1);
					line-height:36upx;
				}
				.copy{
				  width: 36upx;
				  height:auto;
				  margin-left: 30upx;
				}
				.title-dingdan-fr{
					font-size:26upx;
					font-weight:500;
					color:rgba(219,193,145,1);
					line-height:36upx;
				}
			}
			.title-time{
				font-size:22upx;
				font-weight:bold;
				color:rgba(153,153,153,1);
				line-height:36upx;
				margin-top: 20upx;
			}
		}
    }
    .main_list{
    	overflow: hidden;
    	padding: 20upx 0;
    	border-bottom: 1upx solid #ededed;
		.tupic{
			float: left;
			width: 160upx;
		}
		.main_list_fr{
			float: left;
			margin-left: 40upx;
			width:calc(100% - 200upx);
			.main_list_fr_title{
				height:80upx;
				line-height: 34upx;
				overflow:hidden;
				 display:-webkit-box;
				text-overflow:ellipsis;
				-webkit-box-orient:vertical;
				-webkit-line-clamp:2;
				font-size: 26upx;
			}
			.main_list_fr_bot{
				overflow: hidden;
				font-size:22upx;
				font-weight:500;
				color:rgba(153,153,153,1);
				.main_list_fr_bot_fl{
					float: left;
					line-height:40upx;
					font-size:24upx;
				}
				.main_list_fr_bot_fl.test{
					font-size:30upx;
					font-family:'DINCond';
					font-weight:400;
					display: flex;
					align-items: center;
					color:rgba(51,51,51,1);
					.jifen{
						background: url('https://static.xpandago.net/wechat/images/jf_icon%402x.png') no-repeat left center;
						background-size: 24upx;
						padding-left: 30upx;
						font-size:30upx;
						font-family:'DINCond';
						font-weight:400;
						color:rgba(219,194,145,1);
						margin-right: 10upx;
					}
					text{
						font-size:28upx;
						color:rgba(153,153,153,1);
					}
					.nums{
						transform: rotate(45deg);
						font-size: 28upx;
						margin-left: 10upx;
						display: inline-block;
					}
				}
				.main_list_fr_bot_fr{
					float: right;
					font-size:22upx;
					line-height:40upx;
					text{
						font-size:22upx;
						font-family:'DINCond';
						font-weight:400;
						color:rgba(153,153,153,1);
					}
				}
			}
		}
    }
	.main_list:last-child{
		border: none;
	}
    .footer{
    	padding: 20upx 30upx;
    	background: #FFFFFF;
    	margin-top: 20upx;
		.footer_list{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20upx 0;
			border-bottom: 1upx solid #ededed;
			.footer_list_fl{
				font-size:26upx;
				font-weight:500;
				color:rgba(153,153,153,1);
				line-height:40upx;
				display: flex;
				align-items: center;
				.shouyi-img{
					width: 64upx;
					border-radius: 50%;
					height: 64upx;
					margin-right: 10upx;
				}
				
			}
			
			.footer_list_fr{
				font-size:30upx;
				font-family:'DINCond';
				font-weight:400;
				display: flex;
				color:rgba(51,51,51,1);
				.jifen{
					background: url('https://static.xpandago.net/wechat/images/jf_icon%402x.png') no-repeat left center;
					background-size: 24upx;
					padding-left: 30upx;
					font-size:30upx;
					font-family:'DINCond';
					font-weight:400;
					color:rgba(219,194,145,1);
					margin-right: 10upx;
				}
				
			}
			.userName{
				font-size: 30upx;
				font-family: "DINCond";
				font-weight: 400;
				color: #333333;
				line-height: 48upx;
			}
			.grade{
				padding: 6upx 10upx;
				margin-left: 12upx;
				border: 1upx solid #333333;
				border-radius: 30upx;
				font-size: 16upx;
				font-weight: bold;
				color: #333333;
				line-height: 20upx;
			}
			.footer_list_fr.type{
				background: url('https://static.xpandago.net/wechat/images/jf_icon%402x.png') no-repeat left center;
				background-size: 24upx;
				padding-left: 30upx;
				color: #DBC291;
			}
		}
		.footer_list:last-child{
			border: none;
		}
		.earnings{
			font-size:26upx;
			font-weight:500;
			color:rgba(153,153,153,1);
			line-height:40upx;
		}
    }
	.btn{
		border-top: 1upx solid #ededed;
		padding: 20upx;
		text-align: right;
		background-color: #FFFFFF;
		
		text{
			display: inline-block;
			padding: 0 20upx;
			line-height: 56upx;
			border: 1px solid #070506;
			border-radius:28upx;
			font-size:24upx;
			color:rgba(7,5,6,1);
		}
	}
	.fenxiang-but{
		width: 690upx;
		height: 70upx;
		background: #070506;
		border-radius: 35upx;
		font-size: 26upx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 70upx;
		text-align: center;
		margin: 30upx auto;
	}
	   .imgUrl{
		   // display: none;
	     position: fixed;
	     width: 100%;
	     height: 100%;
	     z-index: 1005;
	     left: 0;
	     top: 0;
	     .imgUrl_bj{
	       position: absolute;
	       width: 100%;
	      height: 100%;
	      z-index: 1001;
	      left: 0;
	      top: 0;
	      background: #000000;
	      opacity: 0.6;
	     }
		 .imgUrl_cen{
		 	position: absolute;
		 	width: 70%;
		 	z-index: 1002;
		 	left: 15%;
		 	top: 10%;
		 	height: 80%;
			overflow: hidden;
		 }
		 .imgUrl_cen_top{
			 border-radius: 20upx;
			 height: 90%;
			 overflow: hidden;
		 }
		 .imgUrl_cen_title{
			 background: #FFFFFF;
			 color: #333333;
			 border-radius: 20upx;
			 text-align: center;
			 width: 100%;
			 line-height: 60upx;
			 margin-top: 20upx;
		 }
	     .imgUrl_img{
			 height: 100%;
			 .linkimage {
				display: block;
				width: 100%;
				 height: auto;
				-webkit-touch-callout: none;  // 要配置这行关键代码，不然可能不生效
			  }
			  .linkimageIos{
				  display: block;
				  width: 100%;
				   height: auto;
				  -webkit-touch-callout: default;  // 要配置这行关键代码，不然可能不生效
			  }
	     }
	   }
</style>
<template>
	<view>
		<view class="header">
			<image class="header-fl" src="/static/img/location_icon@2x.png" mode="widthFix"></image>
			<view class="header-fr">
				<view class="header-fr-top">
					<view class="name">{{itemlist.receiptName}}</view>
					<view class="mobile">{{itemlist.receiptPhone}}</view>
				</view>
				<view class="header-fr-bot">{{itemlist.address}}</view>
			</view>
		</view>
		<view class="main">
			<view class="main_title">
				<view  class="title-name">
					<view class="name">下单人:</view>
					<image v-if="itemlist.headImg!='' && itemlist.headImg!=undefined" :src= "'https://static.xpandago.net'+'/'+itemlist.headImg" class="title-img" mode="widthFix"></image>
					<view class="name">{{itemlist.userName}}</view>
					<view class="name">{{itemlist.userPhone}}</view>
				</view>
			</view>
			<view class="main_title">
				<view  class="title-dingdan">
					<view class="title-dingdan-fl">
						订单号:{{itemlist.orderNo}}
						<image src="/static/img/copy_icon@2x.png" class="copy" @tap="copy(itemlist.orginOrderNo)" mode="widthFix"></image>
					</view>
					<view class="title-dingdan-fr">
						{{itemlist.orderState}}
					</view>
				</view>
				<!-- <view  class="title-time">
				支付时间: {{itemlist.patTime}}
				</view> -->
			</view>
			<view class="main_list_for">
				<view class="main_list"  v-for="(item,i) in itemlist.commodityInfoList">
					<image v-if="itemlist.headImg!='' && itemlist.headImg!=undefined" :src= "'https://static.xpandago.net'+'/'+item.goodImg" class="tupic" mode="widthFix"></image>
					<view class="main_list_fr">
						<view class="main_list_fr_title">{{item.goodsName}}</view>
						<view class="main_list_fr_bot">
							<view class="main_list_fr_bot_fl">{{item.goodsState}}</view>
						</view>
						<view class="main_list_fr_bot">
							<view class="main_list_fr_bot_fl test"><view class="jifen" v-if="item.costPoint>0 && item.costPoint!=null">{{item.costPoint}} +</view>¥ {{item.realPrice}}<text class="nums">+</text><text>{{item.goodsNums}}</text></view>
							<view class="main_list_fr_bot_fr" v-if="item.goodsProfit != null">销售收益：<text>￥{{item.goodsProfit}}</text></view>
							<!-- <view class="main_list_fr_bot_fr" v-if="item.goodsMasterAward != null">辅导津贴：<text>￥{{item.goodsMasterAward}}</text></view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="footer_list" v-if="itemlist.goodsTotalPoint!='' && itemlist.goodsTotalPoint!=null && itemlist.goodsTotalPoint!=0">
				<view class="footer_list_fl">积分收益</view>
				<view class="footer_list_fr type">{{itemlist.goodsTotalPoint}}</view>
			</view>
			<view class="footer_list">
				<view class="footer_list_fl">预计收益</view>
				<view class="footer_list_fr">¥ {{itemlist.estimatedIncome}}</view>
			</view>
			<view class="footer_list">
				<view class="footer_list_fl">订单总额</view>
				<view class="footer_list_fr"><view class="jifen" v-if="itemlist.costPoint>0">{{itemlist.costPoint}} +</view> ¥ {{itemlist.orderTotal}}</view>
			</view>
			<view class="footer_list" v-if="itemlist.createTime!='' && itemlist.createTime!=null">
				<view class="footer_list_fl">下单时间</view>
				<view class="footer_list_fr">{{itemlist.createTime}}</view>
			</view>
		</view>
		<view class="footer" v-if="itemlist.list!='' && itemlist.list!=null">
			<view class="footer_list earnings">收益明细</view>
			<view class="footer_list" v-for="(item,i) in itemlist.list" :key="i">
				<view class="footer_list_fl">
					<image v-if="item.headIco!='' && item.headIco!=undefined" :src= "'https://static.xpandago.net'+'/'+item.headIco" class="shouyi-img" mode="widthFix"></image>
					<view class="userName">{{item.userName}}</view>
					<view class="grade" v-if="item.type == 0">店长</view>
					<view class="grade" v-else-if="item.type == 1">服务商</view>
					<view class="grade" v-else-if="item.type == 1">总监</view>
				</view>
				<view class="userName">{{item.money}}</view>
				<!-- <view class="footer_list_fr">
					<view class="test" v-if="item.type==0">销售收益</view>
					<view class="test" v-else-if="item.type==1">辅导津贴</view>
				</view> -->
			</view>
		</view>
		<view class="btn" v-if="itemlist.btnWl == 1">
			<text @tap.stop="openLogistics(itemlist.orderId)">查看物流</text>
		</view>
		<view class="fenxiang-but" @tap="saveOrderDeatail">分享</view>
		<view class="imgUrl" v-if="imgShow==true">
		  <view class="imgUrl_bj"  @tap.stop="close"></view>
		  <view class="imgUrl_cen">
			  <view class="imgUrl_cen_top">
				  <scroll-view scroll-y="true" class="imgUrl_img">
					  <img v-if="isIosShow==true" :src= "'https://static.xpandago.net'+'/'+dataImg" class="linkimage" mode="widthFix" />
					  <img v-else-if="isIosShow==false" :src= "'https://static.xpandago.net'+'/'+dataImg" class="linkimageIos" mode="widthFix" />
				  </scroll-view>
			  </view>
			  <view class="imgUrl_cen_title">长按图片，保存或分享</view>
		  </view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/api';
	export default {
		data() {
			return {
				orderNo: '',
				imgShow:false,
				dataImg:'',
				isIosShow:false,
				itemlist:{}
			}
		},
		onLoad(options) {
			this.orderNo=options.orderNo
			//判断环境显示图片
			const ua = window.navigator.userAgent.toLowerCase();
			var u = navigator.userAgent;
			var isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1; // 微信内
			var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端
			var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
			// 微信内
			if(isWeixin) {
				this.isIosShow=true
			} else {
				//android端
				if (isAndroid) {
					this.isIosShow=false
				}
				//ios端
				if (isIOS) {
					this.isIosShow=false
				}
			}
			
			this.queryOrderInfo()
		},
		//下拉刷新
		 onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			this.queryOrderInfo()
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 1000);
		},
		methods: {
			openLogistics(orderId){
				uni.navigateTo({
				  url: "/pages/datail/logistics?orderId=" + orderId
				})
			},
			async queryOrderInfo(){
				const token=uni.getStorageSync('token')
				const [err, res] = await api.queryOrderInfo({
					query: {
						 orderNo:this.orderNo
					},
					 header:{
						'Content-Type': 'application/json',
						'token':token
					 }
				 });
				 if(res.data.code == 0){
					 this.itemlist=res.data.data
				 }else{
					 uni.showToast({
					   title: res.data.msg,
					   icon:"none"
					 })
				 }
			},
			async saveOrderDeatail(){
				if(this.dataImg!='' && this.dataImg!=null){
					this.imgShow=true
					return false
				}
				const token=uni.getStorageSync('token')
				const [err, res] = await api.saveOrderDeatail({
					query: {
						orderNo:this.orderNo
					},
					 header:{
						 'Content-Type': 'application/x-www-form-urlencoded',
						 'token':token
					 },
					 method:'POST'
				 });
				 if(res.data.code == 0){
					 this.imgShow=true
					 this.dataImg=res.data.data
				 }else{
					 uni.showToast({
					   title: res.data.msg,
					   icon:"none"
					 })
				 }
			},
			//复制粘贴
			copy(copy){
			  uni.setClipboardData({
			    data:copy,
			    success (res) {
			      uni.showToast({
			        title: '复制成功',
			        icon:"none"
			      })
			    }
			  })
			},
			//关闭弹框
			close(){
				this.imgShow=false
			}
		}
	}
</script>
